<template>
  <div class="data-center-main" ref="dataCenter">
    <div class="leftpart">
      <div class="leftTop">
        <div style="margin-bottom: 35px">
          <span class="title">冰柜数量</span>
          <!-- <span style="color: #c7c7c7; font-family: HarmonyOS_Sans_SC_Light"
            >{{ curDate + " " + curTime }}已更新</span
          > -->
        </div>
        <div style="display: flex; justify-content: space-around">
          <div >
            <div class="titleFont">设备总数量</div>
            <div class="valueFont">
              {{ mainData.deviceCount || 50 }}
            </div>
          </div>
          <div style="border-left: 1px solid rgba(0, 0, 0, 0.06);padding-left: 32px;">
            <div class="titleFont">待分配数量</div>
            <div class="valueFont">23</div>
          </div>
          <div style=" border-left: 1px solid rgba(0, 0, 0, 0.06);padding-left: 32px;">
            <div class="titleFont">待投放数量</div>
            <div class="valueFont">23</div>
          </div>
          <div style=" border-left: 1px solid rgba(0, 0, 0, 0.06);padding-left: 32px;">
            <div class="titleFont">投放中数量</div>
            <div class="valueFont">23</div>
          </div>
          <div style=" border-left: 1px solid rgba(0, 0, 0, 0.06);padding-left: 32px;">
            <div class="titleFont">待检测数量</div>
            <div class="valueFont">23</div>
          </div>
        </div>
      </div>
      <div class="leftBot">
        <div
          style="
            height: 60%;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            margin-bottom: 20px;
          "
        >
          <span class="title" style="margin-bottom: 20px">地域分布</span>
          <div style="display: flex; width: 100%; height: 100%">
            <div
              style="
                width: 70%;
                height: 100%;
                border-radius: 10px;
                display: flex;
                justify-content: center;
              "
              id="mapContainer"
            >
              <div class="status">
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                  "
                >
                  <div class="dot" style="background-color: #6474ff"></div>
                  <div style="font-size: 16px; color: #8c8c8c">
                    当前在线：{{ mainData.enableDeviceCount }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                  "
                >
                  <div class="dot" style="background-color: #3ec67d"></div>
                  <div style="font-size: 16px; color: #8c8c8c">
                    定位正常：{{ mainData.locRightDeviceCount }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                  "
                >
                  <div class="dot" style="background-color: #e94d4d"></div>
                  <div style="font-size: 16px; color: #8c8c8c">
                    定位异常：{{ mainData.locErrorDeviceCount }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                  "
                >
                  <div class="dot" style="background-color: #979797"></div>
                  <div style="font-size: 16px; color: #8c8c8c">
                    设备停用：{{ mainData.disableDeviceCount }}
                  </div>
                </div>
              </div>
            </div>
            <div class="distribution">
              <div
                class="btn"
                v-for="(item, index) in mainData.provinceList"
                :key="index"
              >
                {{ item.province }}{{ item.count }}台
              </div>
            </div>
          </div>
        </div>
        <div style="height: 39%; position: relative">
          <el-select
            style="
              position: absolute;
              top: 0px;
              right: 10px;
              z-index: 100;
              width: 100px;
            "
            v-model="timeValue"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in TimePeriod"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div style="width: 100%; height: 100%" id="chart1"></div>
        </div>
      </div>
    </div>
    <div class="rightpart">
      <div class="rightOne">
        <div
          style="
            width: 50%;
            border-right: 1px solid rgba(0, 0, 0, 0.06);
            margin-right: 10px;
          "
          id="chart2"
        >
          <!-- <div id="chart2" style="width: 80%;height: 80%;"></div> -->
        </div>
        <div id="chart3" style="width: 50%"></div>
      </div>
      <div class="rightTwo">
        <div style="width: 100%; height: 100%" id="chart4"></div>
        <el-select
          style="
            position: absolute;
            top: 8px;
            right: 20px;
            z-index: 100;
            width: 100px;
          "
          v-model="timeValue"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="item in TimePeriod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="rightThree" id="chart5"></div>

      <div class="rightFour">
        <div class="title" style="margin-bottom: 10px">异常检测</div>
        <dv-scroll-board
          :config="scrollBoard"
          style="height: 100%; color: #969696; width: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// import { dataView, getDeviceInfo, dataHgqs, getTodayQualifiedDiviceCount } from '@/api/dataCenter/index'
window._AMapSecurityConfig = {
  securityJsCode: "591e46c8fe130643630bd7e02faf5c49",
};

export default {
  components: {},
  data() {
    return {
      curTime: "",
      curDate: "",
      mainData: {
        provinceList: [
          { province: "浙江省", city: "杭州市", count: 1, rate: 4.35 },
          { province: "安徽省", city: "宿州市", count: 1, rate: 4.35 },
        ],
      },
      //adcode
      adcode: [
        { adcode: "110000", name: "北京市" },
        { adcode: "120000", name: "天津市" },
        { adcode: "130000", name: "河北省" },
        { adcode: "140000", name: "山西省" },
        { adcode: "150000", name: "内蒙古自治区" },

        { adcode: "210000", name: "辽宁省" },
        { adcode: "220000", name: "吉林省" },
        { adcode: "230000", name: "黑龙江省" },

        { adcode: "310000", name: "上海市" },
        { adcode: "320000", name: "江苏省" },
        { adcode: "330000", name: "浙江省" },
        { adcode: "340000", name: "安徽省" },
        { adcode: "350000", name: "福建省" },
        { adcode: "360000", name: "江西省" },
        { adcode: "370000", name: "山东省" },

        { adcode: "410000", name: "河南省" },
        { adcode: "420000", name: "湖北省" },
        { adcode: "430000", name: "湖南省" },
        { adcode: "440000", name: "广东省" },
        { adcode: "450000", name: "广西壮族自治区" },
        { adcode: "460000", name: "海南省" },

        { adcode: "500000", name: "重庆市" },
        { adcode: "510000", name: "四川省" },
        { adcode: "520000", name: "贵州省" },
        { adcode: "530000", name: "云南省" },
        { adcode: "540000", name: "西藏自治区" },

        { adcode: "610000", name: "陕西省" },
        { adcode: "620000", name: "甘肃省" },
        { adcode: "630000", name: "青海省" },
        { adcode: "640000", name: "宁夏回族自治区" },
        { adcode: "650000", name: "新疆维吾尔自治区" },

        { adcode: "710000", name: "台湾省" },
        { adcode: "810000", name: "香港特别行政区" },
        { adcode: "820000", name: "澳门特别行政区" },
      ],
      adcodeList: [],

      TimePeriod: [
        {
          value: "按日查询",
          label: "按日查询",
        },
        {
          value: "按周查询",
          label: "按周查询",
        },
        {
          value: "按月查询",
          label: "按月查询",
        },
      ],
      distributionList: [
        {
          province: "全国",
          num: 9999,
          rate: "",
        },
        {
          province: "浙江省",
          num: 679,
          rate: "（20%）",
        },
        {
          province: "河南省",
          num: 456,
          rate: "（56%）",
        },
        {
          province: "江苏省",
          num: 456,
          rate: "（56%）",
        },
        {
          province: "河北省",
          num: 456,
          rate: "（56%）",
        },
        {
          province: "陕西省",
          num: 446,
          rate: "（53%）",
        },
        {
          province: "甘肃省",
          num: 474,
          rate: "（23%）",
        },
        {
          province: "台湾省",
          num: 44,
          rate: "（23%）",
        },
        {
          province: "安徽省",
          num: 476,
          rate: "（32%）",
        },
        {
          province: "福建省",
          num: 423,
          rate: "（37%）",
        },
        {
          province: "云南省",
          num: 412,
          rate: "（67%）",
        },
        {
          province: "江苏省",
          num: 462,
          rate: "（32%）",
        },
        {
          province: "江西省",
          num: 452,
          rate: "（25%）",
        },
      ],
      timeValue: "按日查询", //动销事件周期
      passengerperiod: "按日查询", //客流趋势周期
      //设备在线率趋势
      deviceBootRate: {
        color: ["#165DFF", "#14C9C9"],
        title: {
          text: "设备在线率趋势",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        legend: { y: "15%", right: "0", data: ["开机设备数量", "开机率占比"] },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "32%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1.02",
              "1.03",
              "1.04",
              "1.05",
              "1.06",
              "1.07",
              "1.08",
              "1.09",
              "1.10",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
            splitLine: {
              lineStyle: {
                show: false,
                type: "dashed",
                color: "#dfdfdf",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: "value",
            //name: 'persent',
            min: 0,
            max: 25,
            axisLabel: {
              color: "#8C8C8C",
              formatter: "{value}%",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          },
        ],
        series: [
          {
            name: "开机设备数量",
            data: [500, 900, 600, 800, 700, 110, 730, 600, 300],
            type: "bar",
            barWidth: 20,
            // areaStyle: {
            //     color: new this.$echarts.graphic.LinearGradient(
            //         0, 0, 0, 1,
            //         [
            //             { offset: 0, color: '#5B6BF4' },
            //             //{ offset: 0.6, color: '#FAAD1470' },
            //             { offset: 1, color: 'rgba(91, 107, 244, 0)' }
            //         ],
            //         false
            //     )
            // },
            showSymbol: false,
          },
          {
            name: "开机率占比",
            data: [15, 18, 13, 17, 23, 10, 13, 17, 16],
            type: "line",
            yAxisIndex: 1,
          },
        ],
      },
      //设备在线率
      onlineRate: {
        color: ["#F7BA1E", "#14C9C9", "#165dff"],
        title: {
          text: "设备在线率(%)",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "30",
          //top: '45%',
          bottom: "0px",
          orient: "vertical",
          itemHeight: 10, // 修改icon图形大小
          itemWidth: 15,
          textStyle: {
            color: "#8593A7",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "设备在线率",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              formatter: "{b} {c}%",
              color: "#8593A7",
              fontSize: 12,
            },
            labelLine: {
              length: 3,
              length2: 8,
            },
            data: [
              { value: 34, name: "在线" },
              { value: 28, name: "待机" },
              { value: 38, name: "离线" },
            ],
          },
        ],
      },
      //位置信息统计（%）
      positionRate: {
        color: ["#165DFF", "#14C9C9"],
        title: {
          text: "位置信息统计(%)",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "30",
          //top: '45%',
          bottom: "0px",
          orient: "vertical",
          itemHeight: 10, // 修改icon图形大小
          itemWidth: 15,
          textStyle: {
            color: "#8593A7",
            fontSize: 12,
          },
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: ["40%", "70%"],
            center: ["40%", "60%"],
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: "#fff",
            //   borderWidth: 2,
            // },
            label: {
              formatter: "{b} {c}%",
              color: "#8593A7",
              fontSize: 12,
            },
            labelLine: {
              length: 3,
              length2: 8,
            },
            data: [
              { value: 28, name: "正常" },
              { value: 72, name: "偏移" },
            ],
          },
        ],
      },
      //在投设备昨日开机时长分布
      onlinetrend: {
        color: "#14C9C9",
        title: {
          text: "在投设备昨日开机时长分布",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
        grid: {
          top: "25%",
          left: "5%",
          right: "1%",
          bottom: "10%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["<24h", "<21h", "<18h", "<15h", "<12h", "<9h", "<6h"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            data: ["100", "200", "400", "600", "800"],
            type: "value",
            minInterval: 200,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            data: [210, 210, 400, 300, 500, 430, 730, 570],
            type: "line",
            barWidth: 20,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(20, 201, 201, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(20, 201, 201, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      },
      //渠道分布
      channelDistribution: {
        color: "#165DFF",
        title: {
          text: "渠道分布",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
        grid: {
          top: "22%",
          left: "7%",
          right: "3%",
          bottom: "13%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              // formatter: "{value}%",
              textStyle: {
                color: "#8C8C8C",
              },
            },
            axisLine: {
              show: false,

              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ["商超", "食杂店", "园区", "便利店", "餐饮"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        series: [
          {
            data: [8000, 9000, 5000, 7000, 4000],
            type: "bar",
            barWidth: 10,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              barBorderRadius: [0, 5, 5, 0],
            },
          },
        ],
      },
      //消息中心
      scrollBoard: {
        header: [
          '<span style="color:#565656;">设备编号</span>',
          '<span style="color:#565656;">异常类型</span>',
          '<span style="color:#565656;">详情</span>',
          '<span style="color:#565656;">检测日期</span>',
        ],
        headerBGC: "#F4F7FA",
        oddRowBGC: "#F4F7FA",
        evenRowBGC: "#ffffff",
        rowNum: 3,
        align: ["center", "center", "center", "center"],
        // columnWidth: [100,200, 100,100],
        data: [
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
          ["123456789", "非法位移", "13", "2024.02.18"],
        ],
      },
    };
  },
  mounted() {
    //this.getDataView()
    this.init();
    this.initAMap();
    this.curTime = new Date().toLocaleTimeString();
    this.curDate = new Date().toLocaleDateString();
  },
  beforeDestroy() {},
  methods: {
    init() {
      var chartDom = document.getElementById("chart1");
      var deviceBootRateChart = this.$echarts.init(chartDom);
      deviceBootRateChart.setOption(this.deviceBootRate);

      var chartDom = document.getElementById("chart2");
      var onlineRateChart = this.$echarts.init(chartDom);
      onlineRateChart.setOption(this.onlineRate);

      var chartDom = document.getElementById("chart3");
      var positionRateChart = this.$echarts.init(chartDom);
      positionRateChart.setOption(this.positionRate);

      var chartDom = document.getElementById("chart4");
      var onlineTrendChart = this.$echarts.init(chartDom);
      onlineTrendChart.setOption(this.onlinetrend);

      var chartDom = document.getElementById("chart5");
      var channelDistributionChart = this.$echarts.init(chartDom);
      channelDistributionChart.setOption(this.channelDistribution);

      window.onresize = () => {
        deviceBootRateChart.resize();
        onlineRateChart.resize();
        positionRateChart.resize();
        onlineTrendChart.resize();
        channelDistributionChart.resize();
      };
    },
    getDataView() {
      this.adcodeList = [];
      // 获取大屏数据
      dataView({
        // userId: this.customerID,
        userId: this.$store.state.user.id,
      })
        .then((res) => {
          console.log("## dataView ==> ", res);
          const {} = res.data;
          this.mainData = res.data;
          this.adcode.map((item1) => {
            this.mainData.provinceList.map((item2) => {
              if (item1.name == item2.province)
                this.adcodeList.push(item1.adcode);
            });
          });
          console.log("adsfasdf", this.mainData.provinceList[0].count);
        })
        .catch((err) => {
          this.$message.error(err.message);
          console.log("## err", err);
        })
        .finally(() => {
          this.initAMap();
          this.positionRate.series[0].data[0].value =
            this.mainData.locRightDeviceCount;
          this.positionRate.series[0].data[1].value =
            this.mainData.locErrorDeviceCount;
          this.init();
        });
    },
    /**初始化 */
    initAMap() {
      AMapLoader.load({
        key: "fdf3c1227382941015a1295cafb4d0a7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ControlBar",
          "AMap.HawkEye",
          "AMap.ToolBar",
          "AMap.CitySearch",
          "AMap.Geocoder",
          "AMap.MapType",
          "AMap.DistrictSearch",
          "AMap.Polygon",
          "AMap.DistrictLayer",
          "AMap.Pixel",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 注册容器
          this.map = new AMap.Map("mapContainer", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 4, // 初始化地图级别
            resizeEnable: true,
            center: [108.5525, 34.3227], // 初始化地图中心点位置
          });

          var disCountry = new AMap.DistrictLayer.Province({
            zIndex: 10,
            //adcode: ['520000', '540000', '530000', '500000', '360000', '340000', '510000', '350000', '430000'],
            adcode: this.adcodeList,
            SOC: "CHN",
            depth: 0,
            styles: {
              "nation-stroke": "#f09",
              //'coastline-stroke': [0.85, 0.63, 0.94, 1],
              "province-stroke": "rgb(255,255,255)", //省边界颜色
              "city-stroke": "rgb(255,255,255)", //市边界颜色
              fill: "rgba(100, 116, 255, 0.2)",
            },
          });
          disCountry.setMap(this.map);
          var infoWin = new AMap.InfoWindow({
            closeWhenClickMap: true,
          });
          disCountry.on("click", (ev) => {
            console.log("ev", ev);
            var originalEv = ev.origin.originEvent;
            console.log("clientx", originalEv.clientX, originalEv.clientY);
            var lnglat = this.map.containerToLngLat(
              new AMap.Pixel(originalEv.clientX - 230, originalEv.clientY - 290)
            ); //坐标有偏移手动修正 -90
            var feature = ev.feature;
            var value = ev.value;
            var property = ev.props.NAME_CHN;
            console.log("property", property);
            infoWin.open(this.map, lnglat);
            console.log("lnglat", lnglat);
            var content = [
              property,
              "<br>",
              "设备数量：",
              "<br>",
              //+this.deviceNum(property)
              "当前在线：",
            ];
            infoWin.setContent(content.join(""));
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    deviceNum(p) {
      var num = 0;
      this.mainData.provinceList.map((item) => {
        if (item.province == p) num = item.count;
      });
      return num;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-center-main {
  background-color: #f3f3f3;
  width: 100%;
  height: calc(100vh - 85px);
  display: flex;
  padding: 1%;
}

.leftpart {
  width: 56%;
  border-radius: 4px;
  height: 100%;
  background-color: white;
  padding: 10px 25px;
}

.leftTop {
  position: relative;
  height: 19%;
  background-color: white;
  margin-bottom: 20px;
  //  padding: 25px;
  border-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  //border: solid 1px blue;
}

.leftBot {
  height: 80%;
  position: relative;
  background-color: white;
  border-radius: 4px;
  // padding: 25px;
}

.status {
  z-index: 600;
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 5px;
  left: 5px;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.title {
  font-family: HarmonyOS_Sans_SC_Medium;
  margin-right: 10px;
  font-size: 16px;
  color: #35404f;
  font-weight: 500;
}
.titleFont {
  color: #555;
  font-size: 14px;
  font-family: HarmonyOS_Sans_SC_Regular;
  margin-bottom: 17px;
}
.valueFont {
  color: #202020;
  font-size: 28px;
  font-family: HarmonyOS_Sans_SC_Regular;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #ccc;
  border-radius: 50%;
}

.distribution {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}

.distribution::-webkit-scrollbar {
  //要设置滚动条样式需要先设置滚动条宽度
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.distribution::-webkit-scrollbar-thumb {
  background: #d4d9ff; // 滑块颜色
  border-radius: 5px; // 滑块圆角
}

.distribution::-webkit-scrollbar-track {
  border-radius: 10px; // 轨道圆角
  background-color: #f4f4f4; // 轨道颜色
}

.btn {
  padding: 10px;
  width: 80%;
  height: 56px;
  border-radius: 4px;
  background-color: white;
  border: solid 1px #2b60dd;
  display: flex;
  font-family: HarmonyOS_Sans_SC_Regular;
  color: #333333;
  margin-bottom: 10px;
  align-items: center;
}

.btn:hover {
  padding: 10px;
  width: 80%;
  height: 56px;
  border-radius: 4px;
  background-color: #eaeffc;
  border: solid 1px #2b60dd;
  display: flex;
  font-family: HarmonyOS_Sans_SC_Regular;
  color: #333333;
  margin-bottom: 10px;
  align-items: center;
}

.rightpart {
  width: 44%;
  height: 100%;
  margin-left: 1%;
  display: block;
  //flex-direction: column;
  //justify-content: space-between;
}

.rightOne {
  width: 100%;
  height: 20%;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-bottom: 1vw;
  padding: 10px;
}

.rightTwo {
  width: 100%;
  height: 25%;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  background-color: white;
}

.rightThree {
  margin-top: 1vw;
  margin-bottom: 1vw;
  width: 100%;
  height: 25%;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 10px;
}

.rightFour {
  background-color: white;
  width: 100%;
  height: 22.8%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}

.messageInfo {
  width: 27%;
  margin-left: 10px;
  padding: 5px;
  background-color: #6474ff;
  color: #ffffff;
  font-family: "HarmonyOS_Sans_SC_Regular";
  display: flex;
  justify-content: center;
}

.chart {
  width: 49.5%;
  height: 100%;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}
</style>
